<template>
  <div class="mapWrap">
     <icon 
        class="icon-small" 
        type="info_circle" 
        size="23" 
        @click="goBack"
      >
      </icon>
    <map 
    :longitude="longitude" 
    :latitude="latitude" 
    scale="14" 
    :markers="markers"
    show-location
    >
    </map>
  </div>
</template>

<script>
export default {
  data() {
    return {
      longitude: "",
      latitude: "",
      markers: []
    };
  },
  props: {
    propsLong: {
      type: String,
      default: ""
    },
    propsLat: {
      type: String,
      default: ""
    }
  },
  created() {
    if (this.props && this.props.propsLong) {
      this.longitude = this.props.propsLong;
      this.latitude = this.props.propsLat;
    } else {
      this.getLocation();
    }
  
    this.$emit('toChild',()=>this.getLocation)
  },
  methods: {
    getLocation() {
      wx.getLocation({
        type: "wgs84",
        success:res=> {
          this.longitude = res.longitude;
          this.latitude = res.latitude;
        },
        fail:error=> {
            wx.showToast({
                title:'getLocation failed' ,
                icon: 'none', //图标,
                mask: true, //显示透明蒙层，防止触摸穿透,
            })
        }
      });
    },
    goBack(){
      this.getLocation();
    }
  }
};
</script>

<style lang="scss" scoped>
.mapWrap{
  width: 100%;
  height: 100%;
  position: relative;
  icon{
    position: absolute;
    left: 30rpx;
    bottom: 20rpx;
    z-index: 2
  }
  map {
    width: 100%;
    height: 100%;
  }
}

</style>